<style scoped>
	.language {
		position: absolute;
		right: 25px;
		z-index: 1;
	}

	.cron-wrapper {
		margin-bottom: 10px;
	}

	.el-tabs {
		box-shadow: none;
	}

	/* .tabBody { */
	.el-row {
		margin: 10px 0;


	}

	/* .long { */
	.el-select {
		width: 336px;
	}

	/* } */

	.el-input-number {
		width: 110px;
	}

	/* } */

	.bottom {
		width: 100%;
		text-align: center;
		margin-top: 5px;
		position: relative;


	}

	.value {
		font-size: 18px;
		vertical-align: middle;
	}

	.days {
		display: flex;
		flex-wrap: wrap;
		width: 180%;
		margin-top: 20px;
	}

	.dayli {
		width: 35px;
		cursor: pointer;

	}

	#change-crontab {
		width: 336px;
	}

	.month .el-checkbox {
		width: 60px;
	}
</style>
<template>
	<div id="change-crontab">
		<el-select v-model="xjzq" placeholder="巡检周期">
			<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
		<div v-if="xjzq == 1">
			<div class="days">
				<div class="dayli" v-for="(item,index) in 31" @click="selectday(item)"
					:style="day.specificSpecific.indexOf(item) == -1?'color:#666':'color:#4286f5'">{{item}}</div>
			</div>
			<!-- <div class="tabBody">
				
				<el-row>
					<el-radio class="long" v-model="day.cronEvery" label="3">具体天数(可多选)
						<el-select size="small" multiple v-model="day.specificSpecific">
							<el-option v-for="val in 31" :key="val" :value="val.toString()" :label="val">
							</el-option>
						</el-select>
					</el-radio>
				</el-row>
			</div> -->
		</div>
		<div v-if="xjzq == 2">
			<div class="days">
				<el-checkbox-group v-model="week.specificSpecific">
					<el-checkbox label="周一" :value="1"></el-checkbox>
					<el-checkbox label="周二" :value="2"></el-checkbox>
					<el-checkbox label="周三" :value="3"></el-checkbox>
					<el-checkbox label="周四" :value="4"></el-checkbox>
					<el-checkbox label="周五" :value="5"></el-checkbox>
					<el-checkbox label="周六" :value="6"></el-checkbox>
					<el-checkbox label="周日" :value="7"></el-checkbox>
				</el-checkbox-group>
			</div>
			<!-- <div class="tabBody">
				
				<el-row>
					<el-radio class="long" v-model="week.cronEvery" label="3">具体天数(可多选)
						<el-select size="small" multiple v-model="week.specificSpecific">
							<el-option v-for="i in 7" :key="i" :label="list[i - 1]" :value="i.toString()">
							</el-option>
						</el-select>
					</el-radio>
				</el-row>
			</div> -->
		</div>
		<div v-if="xjzq == 3">
			<div class="days month">
				<el-checkbox-group v-model="month.specificSpecific">
					<el-checkbox label="一月" :value="1"></el-checkbox>
					<el-checkbox label="二月" :value="2"></el-checkbox>
					<el-checkbox label="三月" :value="3"></el-checkbox>
					<el-checkbox label="四月" :value="4"></el-checkbox>
					<el-checkbox label="五月" :value="5"></el-checkbox>
					<el-checkbox label="六月" :value="6"></el-checkbox>
					<el-checkbox label="七月" :value="7"></el-checkbox>
					<el-checkbox label="八月" :value="8"></el-checkbox>
					<el-checkbox label="九月" :value="9"></el-checkbox>
					<el-checkbox label="十月" :value="10"></el-checkbox>
					<el-checkbox label="十一月" :value="11"></el-checkbox>
					<el-checkbox label="十二月" :value="12"></el-checkbox>
				</el-checkbox-group>
			</div>
			<!-- <div class="tabBody">
				<el-row>
					<el-radio class="long" v-model="month.cronEvery" label="3">具体月数(可多选)
						<el-select size="small" multiple v-model="month.specificSpecific">
							<el-option v-for="val in 12" :key="val" :label="val" :value="val.toString()">
							</el-option>
						</el-select>
					</el-radio>
				</el-row>
			</div> -->
		</div>

	</div>
</template>
<script>
	// import Language from './language/index'

	export default {
		name: 'VueCronLinux',
		// props: ['data', 'i18n'],
		data() {
			return {
				xjzq: '',
				options: [{
						name: '每日',
						id: 1
					},
					{
						name: '每周',
						id: 2
					},
					{
						name: '每月',
						id: 3
					},
				],
				list: ['一', '二', '三', '四', '五', '六', '天'].map(val => '星期' + val),

				day: {
					cronEvery: '3',
					incrementStart: '1',
					incrementIncrement: '1',
					rangeStart: '',
					rangeEnd: '',
					specificSpecific: [],
					cronLastSpecificDomDay: 1,
					cronDaysBeforeEomMinus: '',
					cronDaysNearestWeekday: ''
				},
				month: {
					cronEvery: '1',
					incrementStart: '3',
					incrementIncrement: '5',
					rangeStart: '',
					rangeEnd: '',
					specificSpecific: []
				},
				week: {
					cronEvery: '3',
					incrementStart: '',
					incrementIncrement: '',
					specificSpecific: [],
					cronNthDayDay: 1,
					cronNthDayNth: '',
					rangeStart: '',
					rangeEnd: ''
				},
				output: {
					second: '',
					minute: '',
					hour: '',
					day: '',
					month: '',
					Week: '',
					year: ''
				}
			}
		},
		watch: {
			data() {
				this.updateCronFromData()
			},
			cron() {
				this.$emit('change', this.cron)
			}
		},
		computed: {
			text() {
				// return Language[this.i18n || 'cn']
			},
		
			daysText() {
				let days = ''
				// console.log(this.day.cronEvery)
				// let cronEvery = this.day.cronEvery
				// switch (cronEvery.toString()) {
				// 	case '1':
				// 		days = '*'
				// 		break
				// 	case '2':
				// 		days = this.day.incrementStart + '/' + this.day.incrementIncrement
				// 		break
				// 	case '3':
				this.day.specificSpecific = this.day.specificSpecific.split(',')
						this.day.specificSpecific.map(val => {
							days += val + ','
						})
						days = days.slice(0, -1)
					// 	break
					// case '4':
					// 	days = this.day.rangeStart + '-' + this.day.rangeEnd
					// 	break
				// }
				return days
			},
			monthsText() {
				let months = ''
				let cronEvery = this.month.cronEvery
				// switch (cronEvery.toString()) {
				// 	case '1':
				// 		months = '*'
				// 		break
				// 	case '2':
				// 		months = this.month.incrementStart + '/' + this.month.incrementIncrement
				// 		break
				// 	case '3':
						this.month.specificSpecific.map(val => {
							months += val + ','
						})
						months = months.slice(0, -1)
				// 		break
				// 	case '4':
				// 		months = this.month.rangeStart + '-' + this.month.rangeEnd
				// 		break
				// }
				return months
			},
			weeksText() {
				let weeks = ''
				let cronEvery = this.week.cronEvery
				// switch (cronEvery.toString()) {
				// 	case '1':
				// 		weeks = '*'
				// 		break
					// case '3':
						this.week.specificSpecific.map(val => {
							weeks += val + ','
						})
						weeks = weeks.slice(0, -1)
				// 		break
				// 	case '4':
				// 		weeks = this.week.rangeStart + '-' + this.week.rangeEnd
				// 		break
				// }
				return weeks
			},
			cron() {
				return [this.daysText, this.monthsText, this.weeksText]
					.filter(v => !!v)
					.join(' ')
			}
		},
		methods: {

			selectday(i) {
				if (this.day.specificSpecific.indexOf(i) == -1) {
					this.day.specificSpecific.push(i)
				} else {
					this.day.specificSpecific.splice(this.day.specificSpecific.indexOf(i), 1)
				}
				this.day.specificSpecific = this.day.specificSpecific.join(',')
				this.updateCronItem('day', this.day)
				console.log(this.day)
			},
			change() {
				this.$emit('change', this.cron)
				this.close()
			},
			close() {
				this.$emit('close')
			},
			submit() {
				// console.log(this.validate())
				if (!this.validate()) {
					// this.$message.error(this.$t('Cron expression is invalid'))
					return false
				}
				this.$emit('submit', this.cron)
				// console.log( this.cron)
				return true
			},
			validate() {
				console.log(this.daysText)
				// if (!this.minutesText) return false
				// if (!this.hoursText) return false
				if (!this.daysText && !this.monthsText &&!this.weeksText) return false
				// if (!this.monthsText) return false
				// if (!this.weeksText) return false
				return true
			},
			updateCronItem(key, value) {
				if (value === undefined) {
					this[key].cronEvery = '0'
					return
				}
				// if (value.match(/^\*$/)) {
				// 	this[key].cronEvery = '1'
				// } else if (value.match(/\//)) {
				// 	this[key].cronEvery = '2'
				// 	this[key].incrementStart = value.split('/')[0]
				// 	this[key].incrementIncrement = value.split('/')[1]
				// } else if (value.match(/,|^\d+$/)) {
				// 	this[key].cronEvery = '3'
					this[key].specificSpecific = value.split(',')
				// } else if (value.match(/-/)) {
				// 	this[key].cronEvery = '4'
				// 	this[key].rangeStart = value.split('-')[0]
				// 	this[key].rangeEnd = value.split('-')[1]
				// } else {
				// 	this[key].cronEvery = '0'
				// }
			},
			updateCronFromData() {
				console.log(123)
				const arr = this.data ? this.data.split(' ') : []
				// const minute = arr[0]
				// const hour = arr[1]
				const day = arr[2]
				const month = arr[3]
				const week = arr[4]

				// this.updateCronItem('minute', minute)
				// this.updateCronItem('hour', hour)
				this.updateCronItem('day', day)
				this.updateCronItem('month', month)
				this.updateCronItem('week', week)

				console.log(this.cron)
			}
		},
		mounted() {
			this.updateCronFromData()
		}
	}
</script>
